(function(){
  // 获取元素
  const pc = document.querySelector('.jl-pc')
  const mac = document.querySelector('.jl-mac')
  const iphone = document.querySelector('.jl-iphone')
  const android = document.querySelector('.jl-android')
  pc.addEventListener('click', () => {
    document.querySelector('.bg1').style.display = 'block'
    document.querySelector('.bg2').style.display = 'none'
    document.querySelector('.bg3').style.display = 'none'
    document.querySelector('.bg4').style.display = 'none'

    document.querySelector('.jl-pc').classList.add('active')
    document.querySelector('.jl-mac').classList.remove('active')
    document.querySelector('.jl-iphone').classList.remove('active')
    document.querySelector('.jl-android').classList.remove('active')
  })
  mac.addEventListener('click', () => {
    document.querySelector('.bg1').style.display = 'none'
    document.querySelector('.bg2').style.display = 'block'
    document.querySelector('.bg3').style.display = 'none'
    document.querySelector('.bg4').style.display = 'none'
    
    
    document.querySelector('.jl-pc').classList.remove('active')
    document.querySelector('.jl-mac').classList.add('active')
    document.querySelector('.jl-iphone').classList.remove('active')
    document.querySelector('.jl-android').classList.remove('active')
  })
  iphone.addEventListener('click', () => {
    document.querySelector('.bg1').style.display = 'none'
    document.querySelector('.bg2').style.display = 'none'
    document.querySelector('.bg3').style.display = 'block'
    document.querySelector('.bg4').style.display = 'none'
    
    document.querySelector('.jl-pc').classList.remove('active')
    document.querySelector('.jl-mac').classList.remove('active')
    document.querySelector('.jl-iphone').classList.add('active')
    document.querySelector('.jl-android').classList.remove('active')
  })
  android.addEventListener('click', () => {
    document.querySelector('.bg1').style.display = 'none'
    document.querySelector('.bg2').style.display = 'none'
    document.querySelector('.bg3').style.display = 'none'
    document.querySelector('.bg4').style.display = 'block'
    
    document.querySelector('.jl-pc').classList.remove('active')
    document.querySelector('.jl-mac').classList.remove('active')
    document.querySelector('.jl-iphone').classList.remove('active')
    document.querySelector('.jl-android').classList.add('active')
  })
})();